Skip to content

fix: improve chat input UX and IME composition handling (revised)#213

Open
JiahaoZhu11 wants to merge 8 commits intodifferent-ai:devfrom
JiahaoZhu11:fix/chat-input-ime-and-ux
Open

fix: improve chat input UX and IME composition handling (revised)#213
JiahaoZhu11 wants to merge 8 commits intodifferent-ai:devfrom
JiahaoZhu11:fix/chat-input-ime-and-ux

Conversation

@JiahaoZhu11
Copy link
Contributor

@JiahaoZhu11 JiahaoZhu11 commented Jan 23, 2026

Summary

This PR improves the chat input component with two main enhancements:

  1. Better UX for the input bubble - The entire input bubble now behaves as a cohesive input component
  2. Fixed IME composition handling - Enter key now works correctly for Chinese/Japanese/Korean input

This is a revised version of #195.

Changes

Chat Input UX

  • Entire input bubble is now clickable to focus the textarea (not just the textarea itself)
  • Added cursor-text cursor style to indicate the bubble is interactive
  • Send button no longer shows tooltip or responds to hover when hidden (empty input)
  • Removed focus outline from textarea since the outer bubble already shows focus state via focus-within

IME Composition Fix

  • Added compositionstart/compositionend event handlers to track IME state
  • Implemented skipNextEnter flag to differentiate between:
    • Enter to confirm character selection (should not send)
    • Enter to send message (should send)
  • Fixes the issue where pressing Enter during IME composition would send the incomplete text instead of confirming the selected characters

Testing

  • Click anywhere on input bubble → textarea focuses
  • Empty input → send button hidden, no tooltip on hover
  • With text → send button visible, tooltip shows on hover
  • Type Chinese/Japanese/Korean with IME → Enter confirms selection
  • After confirming IME selection → Enter sends message
  • Click to select IME candidate → next Enter sends message correctly

@JiahaoZhu11
fix: improve chat input UX and IME composition handling (revised) (#3)
db206b1 
Chat Input UX Improvements:
- Make entire input bubble clickable to focus the textarea
- Add cursor-text style to indicate the bubble is an input area
- Disable pointer events on send button when hidden (no text entered)
- Only show tooltip on send button when it's visible
- Remove focus outline from textarea (outer bubble shows focus state)

IME Composition Handling:
- Track composition state via compositionstart/compositionend events
- Use skipNextEnter flag to ignore the Enter key that confirms IME
selection
- Fixes issue where pressing Enter during Chinese/Japanese/Korean input
  would send the message instead of confirming character selection
@github-actions
Copy link
Contributor

github-actions bot commented Jan 23, 2026

The following comment was made by an LLM, it may be inaccurate:

@JiahaoZhu11 JiahaoZhu11 changed the title fix: improve chat input UX and IME composition handling (revised) (#3) fix: improve chat input UX and IME composition handling (revised) Jan 23, 2026
@JiahaoZhu11
Bump openwork crate to version 0.3.5
8131445 
Updated the openwork dependency from version 0.3.4 to 0.3.5 in Cargo.lock.
@JiahaoZhu11 JiahaoZhu11 marked this pull request as ready for review January 23, 2026 17:17
@JiahaoZhu11 JiahaoZhu11 marked this pull request as draft January 23, 2026 17:44
@JiahaoZhu11
fix: improve chat input UX with refined styling (#8)
3da35c2 
- Add click-to-focus on input container with cursor-text visual hint
- Add outline-none to textarea for cleaner focus state
- Add disabled:pointer-events-none to run button
- Make run button title conditional on prompt content
@JiahaoZhu11
Copy link
Contributor Author

JiahaoZhu11 commented Jan 23, 2026

Automated message: IME handling + click-to-focus UX looks good and matches the polished input behavior we want.

Two items:

  • PR is currently CONFLICTING with dev; please rebase.
  • Please double-check skipNextEnter doesn’t swallow a real Enter when there was no composition event (should be covered, but worth a quick test with IME + normal typing).

I can’t provide a snapshot from here; a short gif/screenshot of the updated input would help design review.

@benjaminshafii Thanks for the review of #195! I ended up recreating the branch and PR—there were just too many conflicts since we were all touching the same component..

1. Rebase: ✅ Done - rebased on latest dev.

2. skipNextEnter safety check: ✅ Verified

The flag is safe by design - it can only become true when onCompositionStart fires, which exclusively happens during IME input:

  • Normal typing (no IME): onCompositionStart never fires → skipNextEnter stays false → Enter works normally
  • IME → normal typing: After composition ends, setTimeout(100) clears the flag → subsequent Enters work normally

Tested locally with both IME and normal typing - no issues observed.

IME.Typing.mov
Normal.Typing.mov

@JiahaoZhu11 JiahaoZhu11 marked this pull request as ready for review January 23, 2026 19:04
@JiahaoZhu11
Copy link
Contributor Author

JiahaoZhu11 commented Jan 25, 2026

@benjaminshafii Just wanted to check in—if there's anything you'd like me to adjust or clarify, let me know! Otherwise, I appreciate your time reviewing this.

@JiahaoZhu11 JiahaoZhu11 force-pushed the fix/chat-input-ime-and-ux branch from 322b211 to c836a83 Compare January 26, 2026 04:47
@JiahaoZhu11 JiahaoZhu11 force-pushed the fix/chat-input-ime-and-ux branch from 142d583 to 2ce2ef4 Compare January 26, 2026 04:57
@JiahaoZhu11
Improve editor height sync for empty content
5b849a5 
Refactored the syncHeight function to allow CSS to handle sizing when the editor is empty, ensuring better handling of min-height and padding. This prevents unnecessary height adjustments and improves overflow behavior.
@JiahaoZhu11
Copy link
Contributor Author

JiahaoZhu11 commented Jan 26, 2026

@benjaminshafii Ben, while this quick fix addresses an immediate issue, the most critical change is still pending: fixing the IME enter behavior. You can view the videos below to see the difference:

Before:

Before.mov

After:

After.mov

In addition, I've implemented three UI/UX improvements:

  1. Show a disabled state for the send button — Instead of hiding it entirely when disabled, this displays a visually disabled button, which eliminates an awkward gap between the file button and the edge of the input area.
  2. Make the entire bubble clickable and focus the input — The entire message bubble is now clickable and focuses the input, while keeping all interactive elements fully functional.
  3. Fix bottom content shrinking after message is sent — The bottom content in the bubble no longer shrinks up after the message is sent, maintaining proper spacing and layout.
    All three improvements are demonstrated in the "after" video above. If you'd prefer not to include any of these improvements, we can easily remove them—just let me know.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@JiahaoZhu11